<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ip地址查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--引入公用样式-->
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
	</head>

	<body class="dp-n" id="body">
		<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c-ff"></a>
			<h1 class="mui-title titleBar-color">ip地址查询</h1>
		</header>
		<!--这里面是content页面-->
		<div class="mui-content">
			<!--头部搜索框-->
			<div class="header-search bs-bb">
				<div class="header-title">
					<span class="c-a3 bdFontSize">请输入您的要查询的ip地址</span>
				</div>
				<!--搜索框-->
				<div class="header-inp">
					<input type="text" class="bdFontSize" placeholder="127.0.0.1" id="val" />
					<span></span>
				</div>
				<!--确认按键-->
				<div class="header-btn">
					<button class="bdFontSize c-ff" id="btn">确&nbsp;&nbsp;&nbsp;&nbsp;认</button>
				</div>
			</div>
			<!--显示内容区域-->
			<div class="content bs-bb dp-n" id="results">
				<div class="content-tt bs-bb">
					<span class="ttFontSize c-a3">详细信息</span>
				</div>

				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>国家：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="country"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>省份：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="region"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>省份邮编：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="region_id"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>城市：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="city"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>城市邮编：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="city_id"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>区域：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="area"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-4">
						<span>ip：</span>
					</div>
					<div class="mui-col-xs-8">
						<span id="ip"></span>
					</div>
				</div>

			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/immersed.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				plus.nativeUI.showWaiting("加载中...");
				var topoffset = '45px';
				if(plus.navigator.isImmersedStatusbar()) {
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
				}
				document.getElementById('header').style.height = (immersed + 44) + 'px';
				document.querySelector('.mui-content').style.marginTop = (immersed) + 'px';
				plus.nativeUI.closeWaiting();
				document.getElementById("body").className = "";
				/*
				 *发送请求获取值
				 * 
				 **/
				document.getElementById('btn').addEventListener('tap', function(event) {
					//获取用户名
					var val = document.getElementById('val').value;
					var url = "https://api01.aliyun.venuscn.com/ip?ip=" + val;
					//判断是否为空
					if(val != '') {
						plus.nativeUI.showWaiting("加载中...");
						mui.ajax(url, {
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Authorization': 'APPCODE c40827ef516c49a3882e20a1d89e3356',
								'Content-Type': 'application/json'
							},
							success: function(data) {
								plus.nativeUI.closeWaiting();
								console.log(JSON.stringify(data))
								if(data.ret == "200") {
									var res = data.data.result;
									document.getElementById('area').innerText = res.area;
									document.getElementById('country').innerText = res.country;
									document.getElementById('city').innerText = res.city;
									document.getElementById('ip').innerText = res.ip;
									document.getElementById('region_id').innerText = res.region_id;
									document.getElementById('region').innerText = res.region;
									document.getElementById('city_id').innerText = res.city_id;
									document.getElementById("results").className = "content bs-bb";

								} else {
									plus.nativeUI.toast("查询错误，请稍后再试！");
								}
							},
							error: function(xhr, type, errorThrown) {
								plus.nativeUI.closeWaiting();
								plus.nativeUI.toast("查询错误，请稍后再试！");
							}
						});
					} else {
						plus.nativeUI.toast("请输入IP地址！");
					}

				})

			})
			//重写back
			var oldBack = mui.back;
			mui.back = function() {
				document.getElementById("results").className = "content bs-bb dp-n";
				document.getElementById('val').value = "";
				oldBack();
			};
		</script>
	</body>

</html>